<template>
  <div>
    <div class="header">
      <div class="header-l">
        <img class="logo" :src="Logo" alt="logo" />
        <span class="title">未来科技城智慧规建管系统</span>
        <!-- <img class="title" :src="HeaderTitle" alt="title" /> -->
      </div>
      <div class="header-c">
        <div
          v-for="item in navList"
          :key="item.path"
          v-show="checkMenuItem(item)"
        >
          <!-- v-show="checkMenyByPkid(item.pkid)" -->
          <!-- v-show="checkMenuByIds(item.ids)" -->
          <div
            class="nav"
            @click="go(item.path)"
            :class="{ activeNav: path.match(item.path) }"
          >
            {{ item.title }}
          </div>
          <el-image
            class="bg"
            v-if="path.match(item.path)"
            :src="require('./bg.png')"
          />
        </div>
      </div>
      <div class="header-r">
        <el-dropdown>
          <div class="user">
            <Icon
              title="用户"
              name="gerenzhongxin"
              color="#D2E6F0"
              font-size="20"
            />
            <span class="user-name"> {{ user.name }} </span>
            <span class="user-dept">({{ user.dept }})</span>
          </div>
          <el-dropdown-menu
            slot="dropdown"
            id="userLayout"
            :append-to-body="false"
          >
            <el-dropdown-item>
              <span @click="changePassword">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="layout"> 退出登录 </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import Logo from '@/assets/img/logo.png'
import HeaderTitle from '@/assets/img/header-title.png'
import Icon from '@/components/icon'
import cacheUtil from '@/utils/cache'
import { checkNavListItem } from '@/utils/menu/menu'

export default {
  components: {
    Icon
  },
  data() {
    return {
      Logo,
      HeaderTitle,
      title: '未来科技城智慧规建管系统',
      user: {
        name: '',
        dept: ''
      },
      navList: [
        {
          path: '/cockpit',
          title: '驾驶舱',
          pkid: '41',
          ids: [411, 412, 413, 414, 415]
        },
        {
          path: '/dataManagement',
          title: '数据管理',
          pkid: '4B',
          // ids: ['4B1', '4B2', '4B3', '4B4']
          ids: [
            '4B14',
            '4B2',
            '4B21',
            '4B22',
            '4B',
            '4B1',
            '4B11',
            '4B12',
            '4B13',
            '4B23',
            '4B3',
            '4B31',
            '4B32',
            '4B33',
            '4B34',
            '4B35',
            '4B5',
            '4B6',
            '4B7',
            '4B8',
            '4B81',
            '4B82',
            '4B83',
            '4B84',
            '4B9',
            '4Ba1',
            '4B10',
            '4B4',
            '4B36',
            '4B15',
            '4B37',
            '4B-4',
            '4B40',
            '4Bb1',
            '4B41'
          ]
        },
        // {
        //   path: '/wisdomIndustry',
        //   title: '智慧产业',
        //   ids: [491, 492, 493, 494, 495, 496]
        // },
        {
          path: '/wisdomIndustry',
          title: '智慧产业',
          pkid: '49',
          ids: [491, 492, 493, 494, 495, 496]
        },
        {
          path: '/wisdomInnovation',
          title: '智慧科创',
          pkid: '46',
          ids: [461, 462, 463, 464]
        },
        // {
        //   path: '/decision',
        //   title: '智慧规划',
        //   ids: [42, 421]
        // },
        // {
        //   path: '/wisdomBuild',
        //   title: '智慧建设1',
        //   ids: [431, 432, 433, 435, 436]
        // },
        {
          path: '/wisdomPlanning',
          title: '智慧规划',
          pkid: '48',
          ids: [481, 482, 483, 484, 485, 486]
        },
        {
          path: '/wisdomLand',
          title: '智慧土地',
          pkid: '47',
          ids: [471, 472, 473, 474, 476]
        },
        {
          path: '/wisdomConstruction',
          title: '智慧建设',
          pkid: '45',
          ids: [451, 452, 453, 454, 455, 456, 459]
        },
        {
          path: '/wisdomOperation',
          title: '智慧运营',
          pkid: '4A',
          ids: ['4A1', '4A2', '4A3']
        },
        {
          path: '/mochaITOM',
          title: '运维管理',
          pkid: '44',
          ids: [441, 442, 443, 444, 445, 446]
        }
      ],
      keyword: '',
      showHistory: false,
      showResults: false,
      historyAll: ['楼栋', '房屋'],
      userLevel: '',
      historyList: []
      // tree:[],
    }
  },
  computed: {
    path() {
      return this.$route.path
    }
  },
  mounted() {
    this.user.name = cacheUtil.getItem('userName')
    this.user.dept = cacheUtil.getItem('deptName')
  },
  methods: {
    go(path) {
      this.$router.push(path)
    },
    checkMenuByIds(ids) {
      const l = []
      ids.map((item) => {
        const node = this.checkMenuById(item)
        l.push(node)
      })
      const find = l.find((e) => {
        return e
      })
      return !!find
    },
    checkMenyByPkid(id) {
      return checkNavListItem(id)
    },
    checkMenuItem(item) {
      return (
        this.checkMenyByPkid(item.pkid) &&
        this.checkMenuByIds(item.ids)
      )
    },
    // 登出
    layout() {
      console.log(11111)
      cacheUtil.removeItem('menu')
      cacheUtil.removeItem('btnAuth')
      cacheUtil.removeItem('token')
      cacheUtil.removeItem('userName')
      cacheUtil.removeItem('deptName')
      cacheUtil.removeItem('status')
      cacheUtil.removeItem('userId')
      cacheUtil.removeItem('camera')
      cacheUtil.removeItem('roleLevel')
      this.$router.replace('/login')
    },
    // 修改密码
    changePassword() {
      console.log(123456)
      this.$emit('changePassword')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  padding: 0 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &-l {
    display: flex;
    align-items: center;

    img.logo {
      width: 39px;
      height: 34px;
      margin-right: 9px;
    }

    img.title {
      height: 35px;
    }
    .title {
      font-size: 26px;
    }
  }

  &-c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;

    & > div {
      padding: 0 20px;
      height: 30px;
      cursor: pointer;
      word-break: keep-all;
      display: flex;
      justify-content: center;
    }

    .nav {
      position: relative;
    }

    .bg {
      position: absolute;
      bottom: 5px;
    }

    .activeNav {
      color: rgba(0, 186, 255, 1);
      position: relative;

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 0;
        width: 10px;
        height: 100%;
      }
    }
  }

  &-r {
    display: flex;
    align-items: center;

    .active {
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.2);
    }

    .user {
      display: flex;
      align-items: center;
      margin-left: 10px;
      font-size: 16px;
      font-weight: 800;
      color: #d2e6f0;
    }
  }
}

::v-deep .el-dropdown-menu {
  background: rgba(17, 41, 46, 0.8);
  width: 120px;
  border-color: rgba(17, 41, 46, 0.8);
  left: 10px !important;
  padding-top: 5px;
  padding-bottom: 5px;
  z-index: 9999 !important;

  .el-dropdown-menu__item {
    color: #d2e6f0;
    font-size: 16px;
    text-align: center;
  }

  .el-dropdown-menu__item:hover {
    background: rgba(17, 41, 46, 0.8);
  }
}
</style>
<style lang="scss">
#userLayout {
  background: red;
}
</style>
